<template>
  <el-dialog
    :visible.sync="showPop"
    :close-on-click-modal="false"
    top="35vh"
  >
    <div class="pop-detail">
      <div class="close-icon" @click="closeElecPop">
        <span>×</span>
      </div>
      <template v-if="type && type == 'elec'">
        <el-descriptions title="" :column="3" border>
          <el-descriptions-item label="设备编码">
            {{ infoObj.deviceId }}
          </el-descriptions-item>
          <el-descriptions-item label="设备类型">
            {{ infoObj.deviceType }}
          </el-descriptions-item>
          <el-descriptions-item label="是否总路">
            {{ infoObj.isMain }}
          </el-descriptions-item>
          <el-descriptions-item label="户主">            
            {{ infoObj.buildingId }}
          </el-descriptions-item>
          <el-descriptions-item label="告警类型">
            {{ infoObj.alarmTypeShowName }}
          </el-descriptions-item>
          <el-descriptions-item label="预警/报警时间">
            {{ infoObj.alarmTime }}
          </el-descriptions-item>
          <el-descriptions-item label="恢复时间">
            {{ infoObj.recoveryTime }}
          </el-descriptions-item>
          <el-descriptions-item label="持续时间">
            10 秒
            <!-- {{ infoObj.duration }} 秒 -->
          </el-descriptions-item>
          <el-descriptions-item label="用户类型">
            {{ infoObj.userType }}
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">
            {{ infoObj.phone }}
          </el-descriptions-item>
          <el-descriptions-item label="报警地址">
            {{ infoObj.address }}
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <!-- 综合数据库人员详情展示 -->
      <template v-if="type && type == 'personal'">
        <div class="people-info-box">
          <el-descriptions title="" :column="2" border>
            <el-descriptions-item label="姓名">
              {{ infoObj.userName }}
            </el-descriptions-item>
            <el-descriptions-item label="性别">
              {{ infoObj.userSex }}
            </el-descriptions-item>
            <el-descriptions-item label="身份证号码">
              {{ infoObj.userNo }}
            </el-descriptions-item>
            <el-descriptions-item label="所属社区网格">
              {{ infoObj.community }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">
              {{ infoObj.userPhone }}
            </el-descriptions-item>
            <el-descriptions-item label="身份类型">
              {{ infoObj.userType }}  
            </el-descriptions-item>
            <el-descriptions-item label="居住地址">
              {{ infoObj.userAddr }}
            </el-descriptions-item>
            <el-descriptions-item label="已享受政策补贴">
              {{ infoObj.subsidy }}
            </el-descriptions-item>
            <el-descriptions-item label="备注">
              {{ infoObj.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
      <!-- 智慧用电安全用户详情展示 -->
      <template v-if="type && type == 'userinfo'">
        <div class="people-info-box">
          <el-descriptions title="" :column="2" border>
            <el-descriptions-item label="姓名">
              {{ infoObj.userName }}
            </el-descriptions-item>
            <el-descriptions-item label="用户身份">
              普通居民用户
              <!-- {{ infoObj.userType }} -->
            </el-descriptions-item>
            <el-descriptions-item label="所在地区">
              {{ infoObj.community }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">
              {{ infoObj.userPhone }}
            </el-descriptions-item>
            <!-- <el-descriptions-item label="单位名称">
            </el-descriptions-item> -->
            <el-descriptions-item label="地址">
              {{ infoObj.userAddr }}
            </el-descriptions-item>
            <!-- <el-descriptions-item label="在线设备数统计">
            </el-descriptions-item>
            <el-descriptions-item label="离线设备数统计">
            </el-descriptions-item>
            <el-descriptions-item label="用电量统计">
            </el-descriptions-item>
            <el-descriptions-item label="漏电报警次数">
            </el-descriptions-item>
            <el-descriptions-item label="过压报警次数">
            </el-descriptions-item>
            <el-descriptions-item label="电流报警次数">
            </el-descriptions-item>
            <el-descriptions-item label="温度报警次数">
            </el-descriptions-item> -->
          </el-descriptions>
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "elecDeatil",
  data() {
    return {
      showPop: false, //电力预警详情弹窗
      infoObj: {},
      type: "",
    };
  },
  mounted() {},
  methods: {
    getElecInfo(row, type) {
      console.log(row);
      this.infoObj = row;
      this.type = type;
    },
    closeElecPop() {
      this.showPop = false;
      this.$emit("closeElecPopup", this.type);
    },
  },
};
</script>

<style scoped lang="scss">
.pop-detail {
  padding: 4vh 0.8vw 1.6vh 1.4vw;
  width: 38vw;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -35%);
  z-index: 110;
  background: url("@/assets/image/popupbg2.png") no-repeat;
  background-size: 100% 100%;
  .close-icon {
    width: 0.18rem;
    height: 0.18rem;
    background-color: #a7caea;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000e36;
    font-weight: 700;
    position: absolute;
    right: 0.5vw;
    top: 1vh;
    cursor: pointer;
  }
}
</style>